<template>
	<div class="content">
		<!-- 查看可预约场馆 -->
		<el-card shadow="hover" style="margin-bottom: 15px;">
			<div>
				<el-row style="line-height: 40px;">
					<!-- 场馆类型 -->
					<el-col :span="4" :xs="8" class="_search-box">
						<div style="float: left;">
							<span class="span-size">场馆类型：</span>
						</div>
						<el-select v-model="typeName" placeholder="请选择" @change="roomType">
							<el-option
								v-for="item in typeList"
								:key="item.value"
								:label="item.label"
								:value="item.value"
							></el-option>
						</el-select>
					</el-col>
					<!-- 场馆名称 -->
					<el-col :span="4" :xs="20" class="_search-box">
						<div style="float: left;">
							<span class="span-size">场馆名称：</span>
						</div>
						<el-select v-model="dictTypeValue" placeholder="请选择" @change="roomValue">
							<el-option
								v-for="item in dictTypeList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
							></el-option>
						</el-select>
					</el-col>
					<!-- 日期查询 -->
					<el-col :span="10" :xs="16" class="_search-box">
						<div style="float: left;">
							<span class="span-size">日期查询：</span>
						</div>
						<el-date-picker
							v-model="value"
							align="right"
							type="date"
							placeholder="选择日期"
							:picker-options="pickerOptions"
						></el-date-picker>
						<el-time-picker
							is-range
							v-model="value3"
							range-separator="至"
							start-placeholder="开始时间"
							end-placeholder="结束时间"
							placeholder="选择时间范围"
							style="margin-left: 20px;"
						></el-time-picker>
					</el-col>
					<!-- 重置查询按钮 -->
					<el-col :span="3" :xs="24" class="_search-box">
						<div style="width: 100%;text-align: right;">
							<el-button icon="el-icon-refresh-left" @click="reset">重置</el-button>
							<el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<!-- form -->
		<div style="margin-bottom: 15px;">
			<el-table :data="tableData" ref="multipleTable" stripe>
				<el-table-column type="selection" width="55"></el-table-column>
				<el-table-column prop="name" label="教室名称"></el-table-column>
				<el-table-column prop="idCardNum" label="教学楼名称"></el-table-column>
				<el-table-column prop="sex" label="教室类型"></el-table-column>
				<el-table-column prop="age" label="楼层"></el-table-column>
				<el-table-column prop="email" label="教室面积"></el-table-column>
				<el-table-column prop="yearOfEntry" label="教室状态"></el-table-column>
				<el-table-column fixed="right" label="操作" width="100">
					<template slot-scope="scope">
						<el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
						<el-button type="text" size="small">编辑</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 日历 -->
		<el-calendar v-model="value">
			<template slot="dateCell" slot-scope="{ date, data }">
				<div @click="changeTime(date, data)">
					<p>
						{{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : '' }}
						<el-button
							type="text"
							@click.stop="dialogFormVisible = true"
							@click="changeTime(date, data)"
						>添加预约</el-button>
					</p>
					<div>
						<p v-html="dealMyDate(data.day)"></p>
						<br />
						<!-- <div v-for="(item, index) in list" :key="index">
							<div v-if="item.months.indexOf(data.day.split('-').slice(1)[0]) != -1">
								<div v-if="item.days.indexOf(data.day.split('-').slice(2).join('-')) != -1">
									<el-tooltip class="item" effect="dark" :content="item.address" placement="right">
										<div class="is-selected">
											{{ item.type }}-{{ item.address }}
											<br />
											{{ item.startTime }}-{{ item.endTime }}
										</div>
									</el-tooltip>
								</div>
								<div v-else></div>
							</div>
							<div v-else></div>
						</div>-->
					</div>
				</div>
			</template>
		</el-calendar>
		<!-- <el-calendar v-model="timeValue" id="calendar">
			<template slot="dateCell" slot-scope="{ date, data }">
				<div @click="changeTime(date, data)">
					<div class="calendar-day">{{ data.day.split('-').slice(2).join('-') }}</div>
					<div v-for="(item, index) in list" :key="index">
						<div v-if="item.months.indexOf(data.day.split('-').slice(1)[0]) != -1">
							222
							<div v-if="item.days.indexOf(data.day.split('-').slice(2).join('-')) != -1">
								<div class="is-selected">{{ item.content }}111</div>
							</div>
							<div v-else></div>
						</div>
						<div v-else></div>
					</div>
				</div>
			</template>
		</el-calendar>-->
		<!-- 弹出场馆预约模态框 -->
		<el-dialog title="添加预约信息" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="日期" :label-width="formLabelWidth">
					<el-input v-model="form.data" autocomplete="off" placeholder="2020-06-30"></el-input>
				</el-form-item>
				<el-form-item label="开始时间" :label-width="formLabelWidth">
					<el-input v-model="form.content.startTime" autocomplete="off" placeholder="09:00">></el-input>
				</el-form-item>
				<el-form-item label="结束时间" :label-width="formLabelWidth">
					<el-input v-model="form.content.endTime" autocomplete="off" placeholder="17:00">></el-input>
				</el-form-item>
				<el-form-item label="场地类型" :label-width="formLabelWidth">
					<el-input v-model="form.content.type" autocomplete="off" placeholder="教室">></el-input>
				</el-form-item>
				<el-form-item label="预约场地" :label-width="formLabelWidth">
					<el-input v-model="form.content.address" autocomplete="off" placeholder="场馆">></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">取 消</el-button>
				<el-button type="primary" @click="input">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import { viewAvailableVenues, getType } from '@/APIs/index/index'
export default {
	name: 'viewAvailableVenues',
	data() {
		return {
			typeList: [
				{
					value: 'am_room_type',
					label: '教室'
				},
				{
					value: 'am_venue_type',
					label: '运动场'
				}
			],
			dictTypeList: [],
			typeName: [],
			dictTypeValue: null,
			list: [],
			value2: [],
			value3: [new Date(2016, 9, 10, 8), new Date(2016, 9, 10, 9)],
			tableData: [],
			switchValue: true,
			dateValue: '',
			inputValue: '',
			inputValue1: '',
			currentPage: 1, //当前页
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() < Date.now()
				},
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date())
						}
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date()
							date.setTime(date.getTime() - 3600 * 1000 * 24)
							picker.$emit('pick', date)
						}
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date()
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
							picker.$emit('pick', date)
						}
					}
				]
			},
			dialogFormVisible: false,
			formLabelWidth: '120px',
			form: {
				content: [
					{
						appSiteType: '',
						appSiteName: '',
						appStartTime: '',
						appEndTime: ''
					}
				]
			},
			resDate: [
				{
					date: '2020-09-20',
					content: [
						{
							appSiteType: '运动场',
							appSiteName: '场馆A',
							appStartTime: '13:00',
							appEndTime: '14:00'
						}
					]
				}
			],
			value: new Date()
		}
	},
	created() {
		this.$nextTick(() => {
			// 点击前一个月
			let prevBtn = document.querySelector(
				'.el-calendar__button-group .el-button-group>button:nth-child(1)'
			)
			prevBtn.addEventListener('click', e => {
				let d = new Date(this.timeValue)
				let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-08
			})
			//点击下一个月
			let nextBtn = document.querySelector(
				'.el-calendar__button-group .el-button-group>button:nth-child(3)'
			)
			nextBtn.addEventListener('click', e => {
				let d = new Date(this.timeValue)
				let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-10
			})
			//点击今天
			let todayBtn = document.querySelector(
				'.el-calendar__button-group .el-button-group>button:nth-child(2)'
			)
			todayBtn.addEventListener('click', e => {
				let d = new Date(this.timeValue)
				let resDate = d.getFullYear() + '-' + this.handleTime(d.getMonth() + 1) //2020-09
			})
		})
	},
	mounted() {
		// this.roomType()
	},
	methods: {
		// 查询
		query() {
			console.log('查询')

		},
		// 重置
		reset() {
			console.log('重置')
			this.typeName = []
			this.value = new Date()
			this.value3 = [new Date(2016, 9, 10, 8), new Date(2016, 9, 10, 9)]
		},
		// 请求教室类型
		async roomType(v) {
			// viewAvailableVenues()
			const dictType = v
			const data = await getType({
				dictType
			})
			// console.log('data值', data)
			const dictTypeList = []
			for (let i = 0; i < data.data.length; i++) {
				this.dictTypeList.push({
					name: data.data[i].dictLabel,
					value: data.data[i].dictValue
				})
			}
			// console.log('dictTypeList值', this.dictTypeList)
			this.roomValue()
		},
		// 请求教室名称
		roomValue(v) {
			console.log('调用roomType取得教室Value', v);
		},
		// 获取数据
		// async postVenueDetailsListData() {},
		// 渲染预约信息
		dealMyDate(v) {
			// console.log(this.date)
			let len = this.resDate.length
			let res = ''
			for (let i = 0; i < len; i++) {
				let len1 = this.resDate[i].content.length
				for (let j = 0; j < len1; j++) {
					if (this.resDate[i].date == v) {
						// console.log(len1);
						res = `${this.resDate[i].content[j].appStartTime}-${this.resDate[i].content[j].appEndTime}<br>
						${this.resDate[i].content[j].appSiteType}-${this.resDate[i].content[j].appSiteName}`
					}
				}
			}
			return res
		},
		// 点击天数
		changeTime(date, data) {
			console.log(date, data, 11111)
			this.form.date = data.day
			console.log(this)
		},
		// 添加内容
		input(v) {
			this.dialogFormVisible = false
			let content = this.form
			console.log(content)
			this.resDate.push(content)
			console.log(this.resDate)
		},
		// 处理时间
		handleTime(s) {
			return s < 10 ? '0' + s : s
		},
		// 点击弹出输入框
		open() {
			this.$prompt('请输入', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消'
			})
				.then(({ value }) => {
					this.$message({
						type: 'success',
						message: '添加成功'
					})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '取消输入'
					})
				})
		}
	}
}
</script>

<style>
.div-Calendar {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
}

.calendar-day {
	text-align: center;
	color: #202535;
	line-height: 30px;
	font-size: 12px;
}

.is-selected {
	color: #f8a535;
	font-size: 10px;
	margin-top: 5px;
}

#calendar .el-button-group > .el-button:not(:first-child):not(:last-child):after {
	content: '当月';
}
</style>
